import React from 'react'
import Link from 'next/link'
import {Facebook, Twitter, Link as LinkIcon, ChevronRight, ChevronLeft} from "lucide-react"

const page = () => {
  const tags = ['Coding', 'trend', 'popular']
  const floor1 = [
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/400/500",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/400/500",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/400/500",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/400/500",
      link: "/fuel-coupon",
    },
  ]
  return (
    <div className='flex flex-col gap-16'>
      <div className='container bg-white'>
        <div className='max-w-[800px] m-auto'>
          <br />
          <h1 className='h1'>H1: Lorem ipsum</h1>
          <div className='flex gap-4 items-center'>
            <img className='rounded-full' src="https://picsum.photos/40/40" alt="" />
            <p className='flex gap-4'><strong>Cartea</strong> <span>2024.12.15</span></p>
          </div>
          <br />
          <ul className='flex gap-4'>
            {tags.map(item=><li key={item} className='btn--hover btn--active py-1 px-8 bg-info/10'>{item}</li>)}
          </ul>
          <br />
          <img src="https://picsum.photos/1600/700" alt="" />
          <br />
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis repellendus aliquam illum nulla ea autem, totam natus. Corrupti at, ipsam expedita animi, porro dolorem beatae voluptas qui laudantium repellat natus!</p>
          <br />
          <h2 className='h2'>H2: iframe icon</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis dolorum nihil repellat cupiditate reiciendis voluptatum quod nostrum aut quis? Repellendus tempora harum veniam deserunt velit facere modi quae impedit exercitationem. Repellat cupiditate reiciendis voluptatum quod nostrum aut quis? Repellendus tempora harum veniam deserunt velit facere modi quae impedit exercitationem</p>
          <br />
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod ut sunt sint omnis voluptatem! Nihil exercitationem dicta nostrum? Cupiditate quisquam recusandae quo eaque. Odit voluptatibus obcaecati repellendus vel nobis hic!</p>
          <br />
          <h2 className='h2'>H2: iframe icon</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis dolorum nihil repellat cupiditate reiciendis voluptatum quod nostrum aut quis? Repellendus tempora harum veniam deserunt velit facere modi quae impedit exercitationem. Repellat cupiditate reiciendis voluptatum quod nostrum aut quis? Repellendus tempora harum veniam deserunt velit facere modi quae impedit exercitationem</p>
          <br />
          <ul>
            <li>
              <h3>H3: test h3</h3>
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nemo porro molestiae, accusamus corrupti pariatur placeat, sint sit ratione, obcaecati dolorum! In dolorem nam iure voluptatem laborum recusandae hic optio.</p>
              <br />
            </li>
            <li>
              <h3>H3: test h3</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nemo porro molestiae, accusamus corrupti pariatur placeat, sint sit ratione, obcaecati dolorum! In dolorem nam iure voluptatem laborum recusandae hic optio. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nemo porro molestiae, accusamus corrupti pariatur placeat, sint sit ratione, obcaecati dolorum! In dolorem nam iure voluptatem laborum recusandae hic optio.</p>
              <br />
            </li>
            <li>
              <h3>H3: test h3</h3>
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nemo porro molestiae, accusamus corrupti pariatur placeat, sint sit ratione, obcaecati dolorum! In dolorem nam iure voluptatem laborum recusandae hic optio.</p>
              <br />
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nemo porro molestiae, accusamus corrupti pariatur placeat, sint sit ratione, obcaecati dolorum! In dolorem nam iure voluptatem laborum recusandae hic optio.</p>
              <br />
            </li>
          </ul>
          <br />
          <h2 className='h2'>H2: iframe icon</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis dolorum nihil repellat cupiditate reiciendis voluptatum quod nostrum aut quis? Repellendus tempora harum veniam deserunt velit facere modi quae impedit exercitationem. Repellat cupiditate reiciendis voluptatum quod nostrum aut quis? Repellendus tempora harum veniam deserunt velit facere modi quae impedit exercitationem</p>
          <br />
          <ul className='grid grid-cols-12 gap-4'>
            <li className='col-span-12 md:col-span-4'>
              <img src="https://picsum.photos/400/300" alt="" />
            </li>
            <li className='col-span-12 md:col-span-4'>
              <img src="https://picsum.photos/400/300" alt="" />
            </li>
            <li className='col-span-12 md:col-span-4'>
              <img src="https://picsum.photos/400/300" alt="" />
            </li>
          </ul>
          <br />
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod ut sunt sint omnis voluptatem! Nihil exercitationem dicta nostrum? Cupiditate quisquam recusandae quo eaque. Odit voluptatibus obcaecati repellendus vel nobis hic!</p>
          <br />
          <br />
          <div className='flex items-center gap-4'>
            <div className='bg-border h-[1px] w-full'></div>
            End
            <div className='bg-border h-[1px] w-full'></div>
          </div>
          <br />
          <ul className='flex gap-4'>
            <li className='btn--hover btn--active bg-[#0866ff] text-white p-2'>
              <Facebook className='text-[16px]' />
            </li>
            <li className='btn--hover btn--active bg-black text-white p-2'>
              <Twitter className='text-[16px]' />
            </li>
            <li className='btn--hover btn--active bg-primary text-white p-2'>
              <LinkIcon className='text-[16px]' />
            </li>
          </ul>
          <br />
          <div className='flex grid-4 justify-between'>
            <Link className='flex gap-4 items-center link' href={`#`}><ChevronLeft /> Prev: Hello world</Link>
            <Link className='flex gap-4 items-center link' href={`#`}>Next: Hello world <ChevronRight /></Link>
          </div>
          <br />
          <br />
          <div className='flex flex-col md:flex-row gap-4 md:gap-16 items-center justify-center bg-gray px-8 py-16'>
            <div className='w-[80px] md:w-[120px]'>
              <img className='aspect-square object-cover rounded-full' src="https://picsum.photos/300/300" alt="" />
            </div>
            <div className='flex-1'>
              <h3>David Jhon</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem velit quisquam, rem molestias laborum corrupti perferendis in nobis doloribus nisi perspiciatis, deserunt similique suscipit officiis eius sint nostrum harum ratione.</p>
              <br />
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis et assumenda laboriosam unde iure? Quam, mollitia explicabo, reprehenderit pariatur illo ducimus distinctio dignissimos facere provident eius veritatis numquam suscipit impedit.
            </div>
          </div>
          <br />
          <br />
        </div>
      </div>
      <div className='container flex flex-col gap-16'>
        <section>
          <h2 className="h2">Fuel coupon</h2>
          <ul className="grid grid-cols-12 gap-4">
            {floor1.map((item, index) => (
              <li key={index} className="card--hover card--active col-span-6 md:col-span-3 flex flex-col gap-2 bg-white">
                <Link href={`/article`}>
                  <img src={item.image} className="w-full aspect-[16/9] object-cover" alt={item.title} />
                  <div className="p-8">
                    <h3 className="h3">{item.title}</h3>
                    <p className="p">{item.description}</p>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        </section>
        <section>
          <h2 className="h2">Fuel coupon</h2>
          <ul className="grid grid-cols-12 gap-4">
            {floor1.map((item, index) => (
              <li key={index} className="card--hover card--active col-span-6 md:col-span-3 flex flex-col gap-2 bg-white">
                <Link href={`/article`}>
                  <img src={item.image} className="w-full aspect-[16/9] object-cover" alt={item.title} />
                  <div className="p-8">
                    <h3 className="h3">{item.title}</h3>
                    <p className="p">{item.description}</p>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        </section>
      </div>
      <br />
      <br />
    </div>
  )
}

export default page